<script setup lang="ts">
import { useRequest } from 'vue-request'
import { searchPlaceAPI } from '@/apis/searchPlace'
import type { Place } from '@/types/api'
import { useBeforeOrderStore } from '@/store/beforeOrder'
import { OrderType } from '@/types/enum'

const router = useRouter()
const beforeOrderStore = useBeforeOrderStore()

// 页面类别，选择上车点还是下车点
const type = ref<'上车点' | '下车点'>()
const navigationDestination = ref<'call' | 'back'>()

// 搜索文本
const searchText = ref('')

// 查询结果
const { data, refreshAsync } = useRequest(
  () => searchPlaceAPI({
    keywords: searchText.value,
    region: beforeOrderStore.city,
  }).then(res => res.data?.pois),
  { manual: true },
)

// 加载页面时设置页面类别，并设置页面标题
onLoad((options) => {
  if (options && options.type) {
    type.value = options.type
    uni.setNavigationBarTitle({ title: type.value || '' })
  }
  if (options?.navigationDestination)
    navigationDestination.value = options.navigationDestination

  if (options?.initialValue) {
    searchText.value = options.initialValue
    search(options.initialValue)
  }
})

async function handleChangeSearch(e: any) {
  searchText.value = e
  search(searchText.value)
}

async function search(keywords: string) {
  searchText.value = keywords
  refreshAsync()
}

/**
 * @description 跳转至选择城市页面
 */
function handleChangeCity() {
  router.push('changeCity')
}

/**
 * @description 取消搜索，关闭当前页面
 */
function handleCancelSearch() {
  router.back()
}

/**
 * @description 选中一个地点，如果选择上车点则返回上一页，
 * 如果选择下车点则根据传入的 navigationDestination 确定路由操作
 *
 * @param place
 */
function handleSelectPlace(place: Place) {
  const [lng, lat] = place.location.split(',').map(el => Number(el))
  if (type.value === '上车点') {
    beforeOrderStore.from = { lng, lat, name: place.name }
    router.back()
  }
  else if (type.value === '下车点') {
    beforeOrderStore.to = { lng, lat, name: place.name }
    if (navigationDestination.value === 'call') {
      router.push({
        name: 'call',
        params: {
          order_type: OrderType.包车.toString(),
        },
      })
    }
    else { router.back() }
  }
}
</script>

<template>
  <!-- 头部 -->
  <view class="sticky left-0 top-60rpx w-screen px-24rpx py-30rpx">
    <SearchBar
      :value="searchText"
      scene="chooseLocation"
      :placeholder="type === '上车点' ? '您在哪上车' : '您在哪下车'"
      @change="handleChangeSearch"
      @cancel="handleCancelSearch"
    >
      <template #prefix>
        <view class="flex items-center" @tap="handleChangeCity">
          <Spacer width="10" />
          <view
            class="h-12rpx w-12rpx rounded-full"
            :style="{ backgroundColor: type === '上车点' ? '#3F8BF6' : '#FA662F' }"
          />
          <Spacer width="14" />
          <view class="text-28rpx text-#333333 font-medium leading-28rpx">
            {{ beforeOrderStore.city || '未知' }}
          </view>
          <Spacer width="14" />
          <image
            class="h-6rpx w-9rpx translate-y-3rpx"
            src="@/static/images/arrow-b.png"
          />
          <view class="mx-34rpx h-32rpx w-1rpx bg-#D1D1D1" />
        </view>
      </template>
    </SearchBar>
  </view>
  <!-- 列表 -->
  <view class="mx-24rpx overflow-hidden rounded-20rpx">
    <!-- <view v-if="type === '上车点'" class="flex items-center bg-#E7E7E7 px-30rpx py-24rpx">
      <image
        class="h-33rpx w-25rpx"
        src="@/static/images/mark.png"
      />
      <Spacer width="16" />
      <view class="text-30rpx text-#333333 font-medium leading-30rpx">
        附近地点
      </view>
    </view>
    <view v-if="type === '下车点'" class="flex items-center bg-#E7E7E7 px-30rpx py-24rpx">
      <image
        class="h-33rpx w-25rpx"
        src="@/static/images/hot.png"
      />
      <Spacer width="16" />
      <view class="c">
        热点推荐
      </view>
    </view> -->
    <view v-if="data?.length === 0" class="absolute left-1/2 top-1/2 text-28rpx text-#999999 -translate-1/2">
      请输入您的{{ type }}
    </view>
    <block v-for="p, i in data" :key="p.id">
      <view class="flex bg-white px-30rpx py-40rpx" @tap="handleSelectPlace(p)">
        <image
          class="h-27rpx w-21rpx"
          src="@/static/images/mark.png"
        />
        <Spacer width="20" />
        <view>
          <view class="text-30rpx text-#333333 font-medium leading-30rpx">
            {{ p.name }}
          </view>
          <Spacer height="14" />
          <view class="text-24rpx text-#999999 font-medium leading-24rpx">
            {{ `${p.pname}${p.cityname}${p.adname}${p.address}` }}
          </view>
        </view>
      </view>
      <Divider v-if="data ? i !== data.length - 1 : false" width="642" />
    </block>
  </view>
</template>

<route lang="yaml">
name: 'chooseLocation'
</route>
